<template>
  <div>
    <div class="me-top">
      <template v-if="$store.user.nickname">
        <img src="../assets/headimg.jpeg">
        <div class="nickname">{{$store.user.nickname}}</div>
      </template>
      <template v-else>
        <van-icon name="user-circle-o" class="default-avatar" />
        <a href="javascript:;" @click="$store.openSignin(true)">登录</a>
      </template>

      <div class="clear"></div>
    </div>

    <div>
      <van-row class="user-links">
        <van-col span="6">
          <van-icon name="pending-payment" />
          <div class="font">待付款</div>
        </van-col>
        <van-col span="6">
          <van-icon name="records" />
          <div class="font">待发货</div>
        </van-col>
        <van-col span="6">
          <van-icon name="tosend" />
          <div class="font">已发货</div>
        </van-col>
        <van-col span="6">
          <van-icon name="logistics" />
          <div class="font">已完成</div>
        </van-col>
      </van-row>
  
      <van-cell-group class="user-group">
        <van-cell icon="records" title="全部订单" is-link />
      </van-cell-group>
  
      <van-cell-group>
        <van-cell icon="like-o" title="我的收藏" to="/collect" is-link  />
        <van-cell icon="description" title="我的收货地址" to="/address" is-link />
        <van-cell icon="setting-o" title="用户设置" is-link />
      </van-cell-group>
    </div>

    <van-tabbar route>
      <van-tabbar-item icon="star-o" to="/">精选</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/gwc">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/myself">我的</van-tabbar-item>
    </van-tabbar>
  </div>


</template>

<script>
  export default {
    methods: {

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .me-top {
    background-color: red;
    height: 20vw;
  }

  .me-top img {
    float: left;
    width: 10vw;
    height: 10vw;
    margin: 5vw 2vw 0 5vw;
    border-radius: 50%;
  }

  .default-avatar {
    float: left;
    font-size: 12vw;
    padding: 0vw;
    margin: 4vw 2vw 0 5vw;
    color: #f4f4f4;
    border-radius: 50%;
  }

  .me-top a {
    float: left;
    margin-top: 7vw;
    color: #f4f4f4;
  }

  .me-top .nickname {
    float: left;
    margin-top: 7vw;
    color: #f4f4f4;
  }
  .van-row{
    width: 100%;
  }
  .van-row .van-icon{
    font-size: 8vw;
    display: block;
    text-align: center;
    margin: 2vw 0;
  }
  .van-row .font{
    text-align: center;
    color: #7D7E80;
    font-size: 4vw;
    margin-bottom:2vw; 
  }
</style>